<script setup lang="ts">
import { getHomeVideoList } from '~/api/home'
import { getHomeVideoListForServer } from '~/api/server'

interface IVideoType {
  type: number
  title: string
  typeName: string
}

const videoTypeList: IVideoType[] = [
  {
    type: 1,
    typeName: 'movie',
    title: '电影'
  },
  {
    type: 2,
    typeName: 'tv',
    title: '电视剧'
  },
  {
    type: 3,
    typeName: 'show',
    title: '综艺'
  },
  {
    type: 4,
    typeName: 'cartoon',
    title: '动漫'
  }
]

const movieData = ref<any[]>([])
const tvData = ref<any[]>([])
const showData = ref<any[]>([])
const cartoonData = ref<any[]>([])

async function getHomeVideoData() {
  const requestApi = process.server ? getHomeVideoListForServer : getHomeVideoList
  try {
    const { data } = await requestApi({ pageNum: 1, pageSize: 10 })
    for (let i = 0; i < data.length; i++) {
      const item = data[i]
      if (item.ysVideoSiteList.length) {
        switch (item.videoSiteType) {
          case 1:
            movieData.value = item?.ysVideoSiteList
            break
          case 2:
            tvData.value = item?.ysVideoSiteList
            break
          case 3:
            showData.value = item?.ysVideoSiteList
            break
          case 4:
            cartoonData.value = item?.ysVideoSiteList
            break
        }
      }
    }
  } catch (error) {}
}
await getHomeVideoData()
</script>

<template>
  <BannerPage :banner-type="{ type: 1, code: 71 }" />
  <nav>
    <ul flex flex-justify-between flex-items-center>
      <li
        v-for="(item, k) in videoTypeList"
        :key="k"
        class="pos-relative my-6 h-7 w24% text-center line-height-7 lg:h-10 md:h-8 xl:h-15 xl:font-size-6 lg:line-height-10 md:line-height-8 xl:line-height-15"
      >
        <NuxtLink
          :key="k"
          :to="`/channel/${item.typeName}`"
          pos-absolute
          bottom-0
          left-0
          right-0
          top-0
          ma
          h-full
          w-full
          :title="item.title"
        >
          {{ item.title }}
        </NuxtLink>
        <NuxtImg h-full w-full :src="`${item.typeName}.png`" alt="微影院-在线电影-最新电影-免费电影-电影在线观看" />
      </li>
    </ul>
  </nav>
  <BannerPage mb-2.5 :banner-type="{ type: 2, code: 72 }" />
  <MediaGrid v-if="movieData.length" type="movie">
    <MediaCard v-for="cards in movieData" :key="cards.videoSiteId" type="movie" :item="cards" />
  </MediaGrid>
  <MediaGrid v-if="tvData.length" type="tv">
    <MediaCard v-for="cards in tvData" :key="cards.videoSiteId" type="tv" :item="cards" />
  </MediaGrid>
  <MediaGrid v-if="showData.length" type="show">
    <MediaCard v-for="cards in showData" :key="cards.videoSiteId" type="show" :item="cards" />
  </MediaGrid>
  <MediaGrid v-if="cartoonData.length" type="cartoon">
    <MediaCard v-for="cards in cartoonData" :key="cards.videoSiteId" type="cartoon" :item="cards" />
  </MediaGrid>
  <!-- <MediaGrid @header-click="changeBatchData">
      <template #header>
        自定义模块
      </template>
      <MediaCard v-for="cards in mockList" :key="cards.id" type="movie" :item="cards" />
    </MediaGrid> -->
</template>
